<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-select v-model="filters.dept" placeholder="请选择部门" @change="fnChangeDept">
						<el-option v-for="item in depts" :key="item.ORGANIZATION_ID" :label="item.ORGANIZATION_NAME" :value="item.ORGANIZATION_ID"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="filters.account" placeholder="请选择人员" @change="fnChangeStaff">
						<el-option v-for="item in staffs" :key="item.USER_ACCOUNT" :label="item.USER_NAME" :value="item.USER_ACCOUNT">
							<span style="float: left">{{ item.USER_NAME }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.USER_ACCOUNT }}</span>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-col>
		
		<el-col :span="24" class="box" v-show="hasShow">
			<el-col :span="24" class="box-header">员工详情</el-col>
			<el-form ref="staffForm" :model="staffForm" :rules="staffRules" label-width="80px" class="staff-info">
			  	<el-form-item style="margin-right: 24%;">
					<el-upload class="avatar-uploader" :action="'/api/doc/avatar/employee/' + filters.account + '?num=' + Math.random()" :show-file-list="false" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			  	<el-form-item label="姓名">
			    	<el-input v-model="staffForm.EmpName" disabled></el-input>
			  	</el-form-item>
			  	<el-form-item label="电话" prop="Mobile">
			    	<el-input v-model="staffForm.Mobile"></el-input>
			  	</el-form-item>
			  	<el-form-item label="部门">
			    	<el-input v-model="staffForm.Orgname" disabled></el-input>
			  	</el-form-item>
			  	<el-form-item>
			    	<el-button type="primary" @click.native="fnUpdateUser">保存更新</el-button>
			    	<el-button type="warning" @click.native="emitJumpPage">工作状态维护</el-button>
			  	</el-form-item>
			</el-form>
		</el-col>
	</section>
</template>

<script>
	import Svc from '../../service/index.js'
	import moment from 'moment'
	export default {
		data() {
			//验证电话号码
	      	var checkMobile = (rule, value, callback) => {
	      		var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
	        	if (value === '') {
          			callback(new Error('请输入申请人联系电话！'));
        		} else if (!reg.test(value)) {
	          		callback(new Error('请输入有效的手机号码！'));
	        	} else {
	          		callback();
	        	}
	      	};
			
			return {
				depts : [], //所有部门
				staffs : [], //当前部门下的员工
				filters : {
					dept : '',
					account :''
				},
				hasShow : false,
				imageUrl : '', //头像（显示用）
				//员工信息
				staffForm: {
					EmpID : '',
					EmpName : '',
        			DeptID : '',
					DeptName : '',
					Orgname : '',
					Photo : '', //头像（保存用）
					Mobile : ''
				},
				staffRules: {
		          	Mobile: [
		            	{ required: true, validator: checkMobile,  trigger: 'blur' }
		          	]
		        }
			}
		},
		methods: {
			//自定义事件->组件跳转
			emitJumpPage(){
				var that = this
				sessionStorage.setItem('chooseStaff', JSON.stringify(that.filters));
				that.$emit('jump-page',this.filters.account,'staff-work-flow')
			},
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //获取所有部门信息
		    fnGetDepts(){
		    	var that = this
	            Svc.fnGetData('/api/account/alldepts',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.depts = res.body.Data
	            	} else {
	            		that.openMessage("部门信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //选择部门
		    fnChangeDept(val){
		    	var that = this
				that.filters.account = ""
		    	that.hasShow = false
				if (sessionStorage.getItem('chooseStaff')) {
					var chooseStaff = JSON.parse(sessionStorage.getItem('chooseStaff'));
					that.filters.account = chooseStaff.account
					sessionStorage.setItem('chooseStaff', "");
				}
		    	that.fnGetStaffs()
		    },
		    //获取当前部门的员工
		    fnGetStaffs(){
		    	var that = this
	            Svc.fnGetData('/api/account/deptuser/'+that.filters.dept,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.staffs = res.body.Data
	            	} else {
	            		that.openMessage("当前部门的员工信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //选择员工
		    fnChangeStaff(){
		    	var that = this
				if (that.filters.account) {
					//获取员工信息
					that.fnGetStaffInfo()
				}
		    },
			//获取员工信息
			fnGetStaffInfo(){
				var that = this
	            Svc.fnGetData('/api/account/emp/detail/'+that.filters.account,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.imageUrl = res.body.Data.Photo
	            		that.staffForm = res.body.Data
	            		that.staffForm.Photo = ""
	            		that.hasShow = true
	            		
	            		if (!res.body.Data.EmpID) {
	            			//获取员工的部门ID及部门名称
							for(var i = 0; i < that.depts.length; i++) {
								var item = that.depts[i]
								if(item.ORGANIZATION_ID == that.filters.dept) {
									that.staffForm.DeptID = item.ORGANIZATION_ID
									that.staffForm.DeptName = item.ORGANIZATION_NAME
									that.staffForm.Orgname = item.ORGANIZATION_NAME
									break
								}
							}
							
							//获取员工的名称及ID
							for(var j = 0; j < that.staffs.length; j++) {
								var item = that.staffs[j]
								if(item.USER_ACCOUNT == that.filters.account) {
									that.staffForm.EmpID = item.USER_ACCOUNT
									that.staffForm.EmpName = item.USER_NAME
									break
								}
							}
	            		}
	            	} else {
	            		that.openMessage("员工详情获取失败！ ",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！ ",'error')
	            })
			},
			//添加领导照片成功
	        handleAvatarSuccess(res, file) {
	        	this.imageUrl = URL.createObjectURL(file.raw);
	        	this.staffForm.Photo = res.Data.Key
	      	},
			//保存更新
			fnUpdateUser : function() {
				var that = this
				Svc.fnPostData('/api/account/emp/save',that.staffForm,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.openMessage('用户信息更新成功！','success')
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage('网络错误，请重新！','error')
	            })
			}
		},
		mounted() {
			//获取当前员工的信息
			var chooseStaff = sessionStorage.getItem('chooseStaff');
			if (chooseStaff) {
				chooseStaff = JSON.parse(chooseStaff);
				this.filters = chooseStaff
			}
			
			//获取所有部门信息
		    this.fnGetDepts()
		}
	}
</script>

<style scoped>
	.toolbar {
		height: 56px;
	    background: #f2f2f2;
	    padding: 10px 10px 0 10px;
	    margin: 10px 0;
	}

	.box {
		background-color: #fff;
   		box-sizing: border-box;
   		background: #fff;
    	border: 1px solid #d1dbe5;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
		margin-top: 20px;
	}

	.box-header{
		background-color: #eef1f6;
	    border-bottom: 1px solid #d1dbe5;
	    padding: 10px;
	    margin-bottom: 24px;
	    font-size: 15px;
	    color: #48576a;
	}

	.detail-form {
		margin:20px;
		width:92%;
		min-width:600px;
	}
	
	.label-txt {
		color: #48576a;
	    text-align: right;
    	margin-right: 10px;
	}
	
	.staff-info{
		margin:20px;
		width:40%;
		min-width:500px;
	}
	.avatar-uploader {
	    width: 150px;
    	height: 200px;
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader:hover {
	    border-color: #409EFF;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 150px;
	    height: 200px;
	    line-height: 200px;
	    text-align: center;
	}
	.avatar {
	    width: 150px;
	    height: 200px;
	    display: block;
	}
</style>